<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-3 left">
            <div role="complementary" class="bs-sidebar hidden-print affix-top">
                <form method="post" onsubmit="return getLookup(this);">
                    <div class="form-group">
                        <?php
                        $data = CHtml::listData($modelBus, 'bus_id', 'name');
                        echo CHtml::dropDownList('Bus[bus_id]', NULL, $data, array('class' => 'form-control'));
                        ?>
                    </div>

                    <div class="checkbox">
                        <label>
                            <?php echo CHtml::checkBox('Bus[direction]', $checked); ?> Hướng đi
                        </label>&nbsp;&nbsp;&nbsp;<?php echo CHtml::submitButton('Tra cứu', array('class' => 'btn-primary')); ?>
                    </div>
                    
                    
                </form>
                
                
                
                <div class="list-group" id="list-station">
                    
               </div>

                
                

            </div>
        </div>
        <div role="main" class="col-md-9 main">
            <div id="map-canvas"  style="width: 100%; height: 100%;"></div>
        </div>
    </div>

</div>

<script>
    var markerList = [];
    var polyline;
    
    window.resetMarker = function() {
        while(markerList[0]){           
            markerList.pop().setMap(null);
        }
    }
    
    window.showMarker = function(json) {
        for(var i=0; i<json.length; ++i) {
                
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(json[i].latitude,json[i].longitude),
                title: json[i].name,
                map: map,
                icon: "http://map.ebms.vn/images/markers/number_" + i + ".png"                
            });

            markerList.push(marker);
        }
               
        map.panTo(markerList[0].getPosition());
    }
            
    window.showPolyline = function(json) {
        
        if(polyline!=null)  
            polyline.setMap(null);
        
        polyline = new google.maps.Polyline({
            map: map,
            strokeWeight: 7,
            strokeOpacity: 0.8,
            strokeColor: "#FF0000"
        }); 
        for(var i=0; i<json.length; i++) {
            path = polyline.getPath();                                                           
            path.push(new google.maps.LatLng(json[i][1],json[i][0]));
        }
    }
    
    function moveTo(lat, lng, title)
	 {
	    map.panTo(new google.maps.LatLng(lat, lng));
	 }
        
    function showList(aItems) {
        $('#list-station').html('');
        var i=0;
        $.each(aItems, function() {
            $('#list-station').append('<a href="#" class="list-group-item" title="'+this.name+'" clatitude="'+this.latitude+'" clongitude="'+this.longitude+'"><span class="badge">'+(++i)+'</span>'+this.name+'</a>');
        });
    }
    function getLookup(objForm) {
        var data = $(objForm).serialize();
            
        
            
        $.ajax({
            url: '<?php echo url('api/SearchBus'); ?>',
            data: data,
            type : 'post',
            cache : 'true',
            dataType : 'json',
            success : function(json) {
                resetMarker();
                showMarker(json.station);
                showPolyline(json.polyline);
                showList(json.station);
            }
        });
            
            
        return false;
    }
    
    $(function() {
        $('#list-station').on('click', '.list-group-item',function() {
            moveTo($(this).attr('clatitude'), $(this).attr('clongitude'), $(this).attr('title'));
        });
    })
</script>